import React from "react";
import { useState, useEffect } from "react";
import { Card, Input, Button, Table, Tag } from 'antd';
import { BorderOutlined } from '@ant-design/icons';
import type { TableColumnsType } from 'antd';
import { useNavigate } from "react-router-dom";
import { useSnapshot } from "valtio";
import { state as state1 } from '@/stores';
import { order } from "@/stores/Order"
export default function ProductList() {
  const store = useSnapshot(state1);
  const orders = useSnapshot(order)
  interface DataType {
    key: React.Key;
    icons: any;
    name: string;
    shopname: string;
    types: string;
    entity: string;
    price: number;
    vipprice: number;
    cost: number;
    takeout: number;
    state: string;
  }
  interface ProductDocument {
    shopname: string;
    StoreCode: String;
    types: string;
    entity: string;
    price: number;
    vipprice: number;
    takeout: number;
    boxfee: number;
    image?: string;
    text: string;
    state: boolean;
  }
  const [columns, setcolumns]: TableColumnsType<DataType> = useState([
    {
      title: <BorderOutlined></BorderOutlined>,
      dataIndex: 'key',
      key: "1",
      render: (text: any, record: DataType) => {
        <span> <BorderOutlined></BorderOutlined></span>
      }
    },
    {
      title: '所属店铺',
      dataIndex: 'name',
      key: "2"
    },
    {
      title: '套餐名称',
      dataIndex: 'shopname',
      key: "3"
    },
    {
      title: '套餐售价',
      dataIndex: 'price',
      key: "4",
      render: (text: any, record: DataType) => {
        return <span>{record.price.toFixed(2)}</span>
      }
    },
    {
      title: '外卖价格',
      dataIndex: 'cost',
      key: "5",
      render: (text: any, record: DataType) => {
        return <span>{record.cost.toFixed(2)}</span>
      }

    },
    {
      title: '餐盒费',
      dataIndex: 'boxfee',
      key: "6",
      render: (text: any, record: DataType) => {
        if (record.boxfee) {
          return record.boxfee.toFiexed(2)
        } else {
          return 0
        }
      },
    },
    {
      title: '状态',
      dataIndex: 'state',
      render: (text: any, record: DataType) => {
        if (record.state) {
          return <Tag color="green">上架</Tag>
        } else {
          return <Tag color="red">下架</Tag>
        }
      },
    },
    {
      title: (
        <span>
          操作
        </span>
      ),
      render: (text: any, record: DataType) => (
        <Space size="middle">
          <a onClick={() => {
            nav("/Comboshow")
            order.showdata(record)
            store.setCurrentPage({ label: "商品详情" })
          }}><BorderOutlined></BorderOutlined>编辑</a>
          <a onClick={() => {
            order.delmax(record._id)
            order.getmax()
          }}><BorderOutlined></BorderOutlined>删除</a>
        </Space>
      ),
    }
  ]);
  useEffect(() => {
    orders.getTypes()
    order.getprolist()
    order.getmax()
  }, [])
  const data = orders.max
  const [name, setname] = useState<string>('')
  const search = () => {
    order.getsmax(name)
  }
  const reset = () => {
    setname("")
    order.getsmax("")
  }
  const nav = useNavigate()
  const routerpush = () => {
    nav("/Combolist")
    store.setCurrentPage({ label: "商品详情" })
  }

  return (
    <div className='w-[100%]'>
      <Card title="订单筛选" className='w-[90%] m-auto min-h-[150px]'>
        <div className="flex">
          <div className="w-[80%]">
            <div className="flex w-[100%] min-w-[1200px] ">
              <div className="flex ml-5 mt-3">
                <p>套餐名称 ： <Input value={name} className="w-[160px] h-[30px]" placeholder="请输入商品名称" onChange={(e) => { setname(e.target.value) }}></Input>
                </p>
              </div>
            </div>
          </div>
          <div className="w-[20%] flex l justify-center items-center">
            <Button type="primary" onClick={search} className="ml-5"><BorderOutlined />查询</Button>
            <Button onClick={reset} className="ml-5">重置</Button>
          </div>
        </div>
      </Card>
      <Card title="订单筛选" extra={<div>
        <Button className="ml-5" type="primary" onClick={() => {
          routerpush()
        }}><BorderOutlined />添加商品</Button>
      </div>} className='w-[90%] m-auto mt-10'>
        <Table
          className="text-center" bordered columns={columns} pagination={{
            defaultPageSize: 5, // 设置每页默认显示的行数
            total: data.length,
            showSizeChanger: true, // 不显示每页显示数量的选择器
            showQuickJumper: false, // 不显示快速跳转到某一页的输入框
            pageSizeOptions: ['5', '10', '20'],
          }} dataSource={data} size="middle" />
      </Card>
    </div>
  )
}
